import React, { useEffect, useState } from "react";
import Swiper from "../../../component/Swiper";
import { Dropdown } from "antd-mobile";

import { getHousingList } from "../../../store/housing";
import { StoreStateType } from "../../../interface";
import { useSelector } from "react-redux";

import { useNavigate } from "react-router-dom";

import {
  SmileOutline,
} from "antd-mobile-icons";
import "./style.scss";

const Shouye = () => {
  // 所有数据
  const housingData = useSelector(
    (state: StoreStateType) => state.PublicReducer.housingList
  );

  useEffect(() => {
    // 获取列表数据
    getHousingList();
  }, []);



  const navigate = useNavigate();

  const toDetail = (id: number) => {
    navigate(`/detail/${id}`);
  };

  


  return (
    <div className="container">
      <Swiper></Swiper>

      <div className="shouyeshi">
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          新房
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          二手房
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          租房
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          买房
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          经纪人
        </div>

        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          地图
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          估价
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          VR看房
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          工具
        </div>
        <div className="shouyeyi">
          <div className="shouyeer">
            <SmileOutline fontSize={48} />
          </div>{" "}
          装修
        </div>
      </div>

      <div className="sanse">
        <div className="sanseyi">
          <h2>一月起租</h2>
          <p>灵活选择</p>
        </div>
        <div className="sanseer">
          <h2>押一付一</h2>
          <p>为你减负</p>
        </div>
        <div className="sansesan">
          <h2>地铁租房</h2>
          <p>快人一步</p>
        </div>
      </div>

      <div className="quanbu">
        <h2>全部房源</h2>
        <div title="两列">
          <Dropdown>
            <Dropdown.Item key="sorter" title="区域">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="bizop" title="房型">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="zop" title="价格">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
            <Dropdown.Item key="bip" title="更多">
              <div style={{ padding: 12 }}></div>
            </Dropdown.Item>
          </Dropdown>
        </div>

        <div className="housinglist">
            
            {housingData.length &&
              housingData.map((item: { id: number; img: string | undefined; title: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; time: string | number | boolean | React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactFragment | React.ReactPortal | null | undefined; }, ind: React.Key | null | undefined) => {
                return (
                  <div key={ind}  className="housinglister">
                    <dl onClick={() => toDetail(item.id)}>
                      <dt>
                        <img src={item.img} alt="" />
                      </dt>

                      <dd>
                        <span>{item.title}</span>
                      </dd>
                    </dl>
                  </div>
                );
              })}
            </div>
       
      </div>
    </div>
  );
};

export default Shouye;
